.kd-input {
    display: flex;
    width: auto;

    .kd-input-add,
    input {
        padding: $input-padding-y $input-padding-x;
        border: $input-border-width solid $input-border-color;
    }

    .kd-input-add {
        flex: 1;
    }

    &.is-disabled {
        background-color: $input-disabled-color;
        cursor: not-allowed;

    }

    &.is-icon input {
        padding-right: $input-icon-width;
    }
}

.kd-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;

    .kd-input-icon {
        position: absolute;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 35px;
        padding: $input-padding-y $input-padding-x;
    }
}



.kd-input-sm {
    font-size: $input-font-size-sm;

    &.is-icon {
        input {
            padding-right: $input-icon-width-sm;
        }
        .kd-input-icon {
            width: $input-icon-width-sm;
        }
    }
}

.kd-input-lg {
    font-size: $input-font-size-lg;

    .kd-input-add,
    input,
    .kd-input-icon {
        padding: $input-padding-y-lg $input-padding-x-lg !important;
    }

    &.is-icon {
        input {
            padding-right: $input-icon-width-lg;
        }
        .kd-input-icon {
            width: $input-icon-width-lg;
        }
    }
}